<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <form action="/lesson19" method="post">
    <div class="sucess" style="font-weight:blod;color:green"></div>
    <div class="" data-error="name" style="color:red">
    </div>
    <input type="text" name="name">
    <div class="" data-error="email" style="color:red">
    </div>
    <input type="text" name="email">
    <input type="submit" value="点击提交">
  </form>

  <script type="text/javascript">
    const form=document.querySelector("form");
        form.addEventListener("submit",function (Event){
          // var  formdata=new FormData(form);
          const inputName=document.querySelector("input");
          const errorName=document.querySelector("[data-error=name]");
          const errorEmail=document.querySelector("[data-error=email]");
          const sucessText=document.querySelector(".sucess");
          const name=inputName.value;
          const email=inputName.nextElementSibling.value;
          Event.preventDefault();
            fetch("/lesson19",
          method:"POST",
        setRequestHeader:{
          "Content-Type":"application/json"
        },
      body:JSON.stringify({name,email});
    }).then(error=>{
      if(error){
        error=JSON.parse(error);
        if(error.name){
          errorName.innerText=error.name;
        }
        if(error.email){
          errorEmail.innerText=error.email;
        }
      }
      else{
        sucessText.innerText="输入成功";
      }
    };


  </script>
</body>
</html>
